<h4>最近7天的销量份数统计</h4>
<canvas id="quantity_chart" style="min-height: 400px;width: 100%">
</canvas>
<hr>
<h4>最近7天的销量金额统计</h4>
<canvas id="seller_chart" style="min-height: 400px;width: 100%">
</canvas>
<script>
  $(function(){
    var foods_list = <%= @food_charts.to_json.html_safe %>
    var labels = []
    var totalQuantityList = []
    var totalSellMoneyList = []
    var colors = []

    foods_list.forEach(function(item){
      console.log(item)
      labels.push(item.name)
      totalQuantityList.push(item.total_quantity)
      totalSellMoneyList.push(item.total_sell_price)
      colors.push(rgb())
    })
    var quantityEle = document.getElementById('quantity_chart')
    var quantityData = new Chart(quantityEle, {
      type: 'bar',
      labels: labels,
      options: {
          scales: {
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: '份数'
              }
            }]
          }
      },
      data: {
         labels: labels,
        datasets: [{
           label: '最近7天的销量份数统计',
           backgroundColor: colors,
           borderColor: colors,
           borderWidth: 1,
           data: totalQuantityList
        }]
      }
    })

    var moneyEle = document.getElementById('seller_chart')
    var moneyData = new Chart(moneyEle, {
      type: 'bar',
      options: {
          scales: {
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: '人民币'
              }
            }]
          }
      },
      data: {
         labels: labels,
        datasets: [{
           label: '最近7天的销量金额统计',
           backgroundColor: colors,
           borderColor: colors,
           borderWidth: 1,
           data: totalSellMoneyList
        }]
      }
    })

    function rgb(){
      var r=Math.floor(Math.random()*255);
      var g=Math.floor(Math.random()*255);
      var b=Math.floor(Math.random()*255);
      var rgb='rgba('+r+','+g+','+b+', 0.2)';
      return rgb;
    }
  })
</script>
